<template>
  <div>
    <el-button type="primary" @click="hanldeCreate" :icon="CirclePlus">增加</el-button>
    <el-table :data="tableData" style="width: 100%" size="large">
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="age" label="操作">
        <template #default="scope">
          <el-link type="primary" :underline="false" @click="handleEdit(scope.row)">编辑
          </el-link>
          <el-link type="primary" :underline="false" @click="handleDelete(scope.row)">删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <app-dialog ref="appDialogRef" @refresh="getTableList"></app-dialog>
  </div>
</template>

<script lang="ts">
import appDialog from './appDialog.vue'
import { CirclePlus } from '@element-plus/icons-vue'
import { defineComponent, reactive, onMounted, ref } from 'vue'
import { getAppList, AppReqData, deleteApp } from '@/api/index'
// interface IComponent {
//   commitHandle: (row: any) => void
// }
export default defineComponent({
  name: "appManage",
  components: {
    // CirclePlus,
    appDialog
  },
  setup() {
    const appDialogRef = ref()
    // const appDialogRef = ref<any>(null)// 这样也可以
    // const appDialogRef = ref<InstanceType<typeof appDialog> & IComponent>() 这样也不报错
    // const appDialogRef = ref() // 这样写也不报错，ref(null),ref({})这两种报错
    const tableData = ref([])
    const hanldeCreate = () => {
      appDialogRef.value.commitHandle('create');
      // 调用子组件对外暴露的方法

    }
    const getTableList = () => {
      getAppList().then(res => {
        console.log(res, 'res')
        tableData.value = res.data.data.items;
      });
    }
    const handleEdit = (row: AppReqData) => {
      appDialogRef.value.commitHandle('edit', row)
      console.log(row)
    }
    const handleDelete = (row: AppReqData) => {
      console.log(row,'delete')
      deleteApp(row.id!).then(res => {
        getTableList()
      }).catch(err => {
        console.log(err, 'err delete')
      })
    }
    //onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码
    onMounted(() => {
      getTableList();
    })


    return {
      tableData,
      hanldeCreate,
      appDialogRef,
      getTableList,
      CirclePlus,
      handleEdit,
      handleDelete
    }
  }
})
</script>

<style scoped>
.el-link {
  margin-right: 8px;
}
</style>